<template>
<div class="page" :class="{ wrap: $route.meta.nav }" :style="pagebgc?`background-color:${pagebgc};`:''">
  <f-placeholder
  :color="getColor"
  :transparent="transparent"
  v-if="!fullscreen"
  />
  <template v-if="!fullscreen && navbar">
    <van-nav-bar
      :title="title"
      :left-arrow="leftArrow"
      :left-text="leftText"
      :border="border"
      :style="navbgc?`background-color:${navbgc};`:''"
      :class="{custom:navbgc}"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #title v-if="hasSlot('title')">
        <slot name="title"></slot>
      </template>
      <template #left v-if="hasSlot('left')">
        <slot name="left"></slot>
      </template>
      <template #right v-if="hasSlot('right')">
        <slot name="right"></slot>
      </template> 
    </van-nav-bar>
  </template>
  <div class="page-main" :class="{'fullscreen':fullscreen, 'no-navbar':!navbar, 'padding':!scroll&&!full, 'min-height':hasMin, overlays:overlays}">
    <template v-if="scroll"><scroller :type="scrollType" :class="{padding:!full}"><slot></slot></scroller></template>
    <template v-else><slot></slot></template>
  </div>
</div>
</template>

<script>
import Config from '@/api/config'
import { computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
export default {
  name: 'page',
  props: {
    title: String,//头部导航栏标题
    pagebgc: String,//页面背景色
    navbgc: String,//头部导航栏背景色
    leftArrow: {//是否显示头部导航左侧栏箭头图标
      type: Boolean,
      default: true
    },
    leftText: String,//头部导航左侧栏文字
    border: {//是否显示头部导航栏底部边框线
      type: Boolean,
      default: false
    },
    navbar: {//是否显示头部导航栏
      type: Boolean,
      default: false
    },
    hasMin: {//是否设置页面最小高度
      type: Boolean,
      default: false
    },
    autoStatus: {//App端时，是否自动依据导航栏，或页面背景色设置状态栏样式（有导航栏时，app状态栏优先依据导航栏背景色设置）
      type: Boolean,
      default: true
    },
    overlays:{//页面是否沉浸式状态栏显示
      type: Boolean,
      default: Config.invasion
    },
    transparent: {//状态栏占位符背景是否透明
      type: Boolean,
      default: false
    },
    fullscreen:{//是否开启全屏展示
      type: Boolean,
      default: false
    },
    full: {//是否显示padding边距
      type: Boolean,
      default: false
    },
    scroll: {//是否启用风格化弹性滚动
      type: Boolean,
      default: true
    },
    scrollType: {//风格化弹性滚动样式 android||ios
      type: String
    }
  },
  setup(params, ctx){
    const router = useRouter()
    const getColor = computed(()=>{
      let _color
      if (params.navbar) {
          _color = params.navbgc || Less.navbgc
      } else {
          _color = params.pagebgc || Less.mainbgc
      }
      return _color
    })
    
    function onClickLeft () {
      if(!params.leftArrow || ctx.slots.left){
        return
      }
      if (ctx.attrs.onClickLeft) {
        ctx.emit('clickLeft')
      } else {
        if (window.history.length > 1) {
          router.back();
        } else {
          router.push({name:'home'});
        }
      }
    }

    function onClickRight () {
      if (ctx.attrs.onClickRight) {
        ctx.emit('clickRight')
      }
    }

    function hasSlot(name){
      return ctx.slots[name]?true:false
    }
    
    return {
      getColor,
      onClickLeft,
      onClickRight,
      hasSlot
    }
  },
}
</script>
